<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <script src="js/vue2.js"></script>
    <script src="js/axios.js"></script>
<!--    样式表-->
    <style>
        #app table{
            border:solid 2px yellowgreen;
            margin:0 auto;
            width:700px;
            font-size:20px;
            border-collapse:collapse;
        }
        tr,td{
            border:solid 2px yellowgreen;
            text-align: center; /* 水平居中 */
            vertical-align: middle; /* 垂直居中 */
        }
    </style>
</head>
<body>
<div id="app">
    <div id="user">
<!--        这里输入框中的内容和newStu中的属性双向绑定，然后传参到添加方法，此时newStu对象是有值的-->
        姓名：<input type="text" v-model="newStu.name"><br>
        性别：<input type="text" v-model="newStu.sex"><br>
        年龄：<input type="text" v-model="newStu.age"><br>
        <button @click="addOne">添加</button>
    </div>
    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr v-for="Student in Students":key="Student.id">
            <td>{{Student.id}}</td>
            <td>{{Student.name}}</td>
            <td>{{Student.sex}}</td>
            <td>{{Student.age}}</td>
            <td>
                <button @click="deleteOne(Student.id)">删除</button>
                <button @click="updateOne(Student.id)">更新</button>
            </td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            newStu:{
                name:"",
                sex:"",
                age:null//年龄初始化为0或者null等合理的值
            },
            Students:[]
        },
        mounted(){
            this.loadStudents();
        },
        methods: {
            loadStudents() {
                axios.get('http://localhost:8080/selectAll').then(
                    response => {
                        this.Students = response.data.data;
                        console.log(response);
                    }
                )
            },
            addOne() {
                if (this.newStu.name == '' || this.newStu.sex == '' || this.newStu.age == null) {
                    alert("请输入完整学生信息！");
                    return;
                }
                axios.post('http://localhost:8080/addOne', this.newStu).then(
                    () => {
                        this.newStu.name = "";
                        this.newStu.sex = "";
                        this.newStu.age = null;
                        this.loadStudents();
                    }
                )
            },
            deleteOne(id) {
                if (confirm("确认删除该学生信息吗?")) {
                    axios.delete(`http://localhost:8080/deleteOne/${id}`).then(
                        () => this.loadStudents()
                    )
                }
            },
            updateOne(id) {
                axios.get(`http://localhost:8080/selectOne/${id}`).then(
                    response => {
                        let a = response.data.data;
                        let newName = prompt("请输入新的姓名", a.name)
                        // 这里我没有加修改性别
                        let newAge = prompt("请输入新的年龄", a.age)
                        let newStu = {
                            id: a.id,
                            name: newName,
                            sex: a.sex,
                            age: newAge
                        }
                        axios.put('http://localhost:8080/updateStu', newStu).then(
                            () => {
                                this.loadStudents();
                            }
                        )
                    }
                )
            }
        }
    })
</script>
</body>
</html>